<template>
  <view>
    <!-- 顶部 -->
    <view class="flex flex-col bg-white">
      <view class="flex items-center">
        <view class="flex items-center mr-24" @click="handleCity">
          <text class="font-30">{{ curCityName || cityName || "定位中..." }}</text>
          <u-icon name="arrow-down-fill" size="18rpx"></u-icon>
        </view>
        <u-search
          v-model="searchCinema"
          placeholder="输入影院名称或者地址进行搜索"
          :show-action="false"
          height="62rpx"
          :input-style="{ 'font-size': '24rpx' }"
          @blur="onSearchCinemaChange"
          @clear="onSearchCinemaChange"
          @search="onSearchCinemaChange"
        ></u-search>
      </view>
    </view>

    <!-- 列表 -->
    <view class="flex flex-col py-20">
      <view v-for="(item, index) in filterCinemas" :key="index" class="flex flex-col">
        <view class="py-24 flex flex-col solid-bottom-1">
          <zm-text-highlight ref="nameText" font-size="30rpx" font-weight="bold" :text="item.cinemaName" :match="searchCinema"></zm-text-highlight>
          <zm-text-highlight ref="addressText" color="#999999" custom-class="mt-10" :text="item.address" :match="searchCinema"></zm-text-highlight>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import weixin from "@/mixins/weixin"
import { mapGetters } from "vuex"
export default {
  mixins: [weixin],
  props: {
    mallCommodityId: { type: [String, Number], default: "" },
    height: { type: Number, default: 0 }
  },
  data() {
    return {
      currentLineType: "",
      searchCity: "",
      searchCinema: "",
      cityId: "",
      curCityName: "",
      citys: [],
      cityGroups: [],
      cityIndexs: [],
      cinemas: [],
      filterCinemas: [],
      cityPopup: false
    }
  },
  computed: {
    ...mapGetters(["cityName", "cityCode"])
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.handleCinemaList()
    },
    handleCity() {
      uni.$on("mall-city", (item) => {
        uni.$off("mall-city")
        this.cityId = item.cityId
        this.curCityName = item.cityName
        this.handleCinemaList()
      })
      this.$toView({
        url: "pages/utils/select-city/select-city",
        params: {
          type: "mall",
          mallCommodityId: this.mallCommodityId
        }
      })
    },
    // 获取影院列表
    handleCinemaList() {
      const data = {
        mallCommodityId: this.mallCommodityId,
        cityId: this.cityId || this.cityCode
      }
      uni.$api.mall.getCommodityCinemaList(data).then((res) => {
        this.cinemas = res
        this.filterCinemas = res
      })
    },

    onSearchCinemaChange() {
      uni.$debounce(() => {
        this.filterCinemas = this.cinemas.filter((item) => {
          return item.cinemaName?.includes(this.searchCinema) || item.address?.includes(this.searchCinema)
        })
        if (this.filterCinemas?.length) {
          this.$nextTick(() => {
            this.$refs?.nameText.forEach((item) => item.update())
            this.$refs?.addressText.forEach((item) => item.update())
          })
        }
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.tips-content {
  height: 0;
  color: #999999;
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 0 0 10rpx 10rpx;
  background: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
  &.is-active {
    height: auto;
  }
}
.city-cell {
  font-size: 26rpx;
  padding: 14rpx 24rpx;
  position: relative;
  background-color: #fff;
  &::after {
    content: "";
    left: 24rpx;
    right: 24rpx;
    bottom: 0;
    position: absolute;
    border-bottom: 2rpx solid #f4f6f7;
  }
}
</style>
